<template>

  <div class="CustomerList">
    <div class="top-header">
      <div class="left">
        <img src="@/assets/index_images/back.png" alt="">
        <span>数据监测</span>
      </div>
      <div class="right">
        <el-select v-model="class_value" placeholder="选择班级" size="medium" class="right-item">
          <el-option
            v-for="item in classList"
            :key="item.id"
            :label="item.className"
            :value="item.id"
          />
        </el-select>
        <el-select v-model="culum_value" placeholder="选择课程" size="medium" class="right-item">
          <el-option
            v-for="item in culumList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <div class="btn-body">
          <el-button
            v-show="this.model_change_flag === true&&this.open_flag===false"
            type="success"
            size="medium"
            plain
            class="right-item btn"
            round
            @click="richang_open"
          >日常模式监测</el-button>
          <el-button
            v-show="this.model_change_flag === true&&this.open_flag===true"
            style="margin-left: 0px;"
            type="success"
            size="medium"
            class="right-item btn"
            round
            @click="end_model"
          >结束日常监测</el-button>

          <el-button
            v-show="this.model_change_flag === false&&this.open_flag===false"
            style="margin-left: 0px;"
            type="success"
            size="medium"
            plain
            class="right-item btn"
            round
            @click="open_model"
          >展示模式监测</el-button>
          <el-button
            v-show="this.model_change_flag === false&&this.open_flag===true"
            style="margin-left: 0px;"
            type="success"
            size="medium"
            class="right-item btn"
            round
            @click="end_model"
          >结束展示监测</el-button>
          <span class="last el-icon-d-caret" @click="change_model" />
        </div>

      </div>
    </div>

    <div class="cus-center">
      <div v-show="this.open_flag===false" class="class_student item-body">
        <div
          v-for="item of this.student"
          :key="item.student_id"
          class="item"
        >
          <img src="@/assets/login_images/spam-fill.png" alt="" class="right">
          <span class="name">{{ item.username }}</span>
          <!-- <span class="num">{{ item.theory_maxheart }}</span> -->
        </div>

      </div>
      <!-- 展示模式 -->
      <div v-show="this.model_change_flag === false&&this.open_flag===true" class="bg">
        <!-- 中间文字 -->
        <div class="mid">
          <div class="mid-item">
            <div class="left">课堂时长</div>
            <div class="right">{{ this.show_time }}</div>
          </div>
          <div class="mid-item">
            <div class="left">采集人数</div>
            <div class="right">{{ this.totalstudent }}</div>
          </div>
        </div>

        <el-button v-show="activeName==='first'" type="success" class="all-big">放大</el-button>
        <!-- 选项卡 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="学生数据" name="xiangxi">
            <zhan-shi-xiangxi ref="xiangxi" :class_value="this.class_value" :starttime="this.starttime" />
          </el-tab-pane>
          <el-tab-pane label="课堂数据" name="zhengti">
            <zhan-shi-zhengti ref="zhengti" :class_value="this.class_value" :starttime="this.starttime" />
          </el-tab-pane>

        </el-tabs>
      </div>

      <!-- 日常模式 -->
      <div v-show="this.model_change_flag === true&&this.open_flag===true" class="richang">
        <!-- 中间文字 -->
        <div class="mid">
          <div class="mid-item">
            <div class="left">课堂时长</div>
            <div class="right">{{ this.show_time }}</div>
          </div>
          <div class="mid-item">
            <div class="left">采集人数</div>
            <div class="right">{{ this.totalstudent }}</div>
          </div>
        </div>
        <ri-chang ref="richang" :class_value="this.class_value" :starttime="this.starttime" />
      </div>
    </div>

    <!-- dialog1 -->
    <plain-dialog
      width="500px"
      title="提示"
      :common_dialog="this.common_dialog"
      @hand_click_false="common_dialog_false"
      @hand_click_true="common_dialog_true"
      @hand_close="hand_close_common"
    >
      <p class="common_dialog_flag">展示模式监测需将学生手表调至“展示模式”？</p>
    </plain-dialog>

    <!-- dialog2 -->
    <plain-dialog
      width="500px"
      title="提示"
      :common_dialog="this.common_dialog2"
      @hand_click_false="common_dialog_false2"
      @hand_click_true="common_dialog_true2"
      @hand_close="hand_close_common2"
    >
      <p class="common_dialog_flag">离开日常监测模式切换至展示模式监测？</p>
    </plain-dialog>

  </div>
</template>

<script>
import Index from '@/api/index.js'
import PlainDialog from '@/components/Dialog/PlainDialog.vue'
import ZhanShiZhengti from './components/ZhanShiZhengti.vue'
import ZhanShiXiangxi from './components/ZhanShiXiangxi.vue'
import RiChang from './components/RiChang.vue'
export default {
  name: 'Index',
  components: {
    PlainDialog,
    ZhanShiZhengti,
    ZhanShiXiangxi,
    RiChang
  },
  data() {
    return {
      class_value: '', // 班级选择
      culum_value: '', // 课程选择
      model_change_flag: true, // q切换模式flag
      common_dialog: false,
      open_flag: false, // 开始侦测
      activeName: 'zhengti',
      common_dialog2: false,
      classList: [], // 班级数组
      culumList: [], // 课程数组
      SportType: 1, // 日常模式
      mid: '',
      starttime: '',
      student: [],
      timer1: null,
      show_time: '',
      totalstudent: ''
    }
  },
  watch: {
    'class_value': function() {
      // 班级id改变
      this.GetUserByClassId()
    }
  },
  mounted() {
    // this.get_customer_list()
    this.GetMonitoringSelect()
  },
  beforeDestroy() {
    clearInterval(this.timer1)
  },
  methods: {
    async GetUserByClassId() { // 获取所有学生
      const data = {
        ClassId: this.class_value
      }
      const result = await Index.GetUserByClassId(data)
      console.log(result)
      if (result.code === window.g.SUCCESS_STATE) {
        this.student = result.result
      }
    },
    async GetMonitoringSelect() { // 获取选项
      const result = await Index.GetMonitoringSelect()
      console.log(result)
      if (result.code === window.g.SUCCESS_STATE) {
        this.classList = result.result.classList
        this.culumList = result.result.culumList
      }
    },

    async StartMonitoring() { // kais开始检测
      const data = {
        ClassId: this.class_value,
        CurriculumId: this.culum_value,
        SportType: this.SportType
      }
      const result = await Index.StartMonitoring(data)
      if (result.code === window.g.SUCCESS_STATE) {
        this.starttime = result.result.starttime
        this.mid = result.result.mid
        this.totalstudent = result.result.totalstudent
        this.deal_time()
      }
    },
    deal_time() {
      const that = this
      const now = new Date().getTime()
      const start = new Date(that.starttime)
      const during = now - start
      var leave1 = during % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
      const hours = Math.floor(leave1 / (3600 * 1000))
      var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))
      that.show_time = hours + '时' + minutes + '分'
      this.timer1 = setInterval(function() {
        const now = new Date().getTime()
        const start = new Date(that.starttime)
        const during = now - start
        var leave1 = during % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
        const hours = Math.floor(leave1 / (3600 * 1000))
        var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
        var minutes = Math.floor(leave2 / (60 * 1000))
        that.show_time = hours + '时' + minutes + '分'
      }, 1000 * 60)
    },
    async CloseMonitoring() {
      const data = {
        ClassID: this.class_value,
        Mid: this.mid,
        CourseID: this.culum_value,
        IsSaveData: 1,
        StartTime: this.starttime,
        SportType: this.SportType
      }
      const result = await Index.CloseMonitoring(data)
      if (result.code === window.g.SUCCESS_STATE) {
        // 关闭轮询心率
        this.$refs.xiangxi.stop()
        // 关闭tu图
        this.$refs.zhengti.stop()
      }
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      console.log(tab)
      if (tab.name === 'zhengti') {
        this.$refs.zhengti.flag = true
        this.$refs.xiangxi.flag = false
      } else if (tab.name === 'xiangxi') {
        this.$refs.xiangxi.flag = true
        this.$refs.zhengti.flag = false
      }
    },
    change_model() { // 切换模式
      if (this.open_flag) {
        this.$message.error('错误，请先结束检测，再切换模式')
      } else {
        if (this.model_change_flag) {
          // 日常模式
          this.common_dialog2 = true
        } else {
          this.model_change_flag = !this.model_change_flag
        }
      }
    },

    open_model() { // 打开遮罩
      if (this.class_value === '' || this.culum_value === '') {
        this.$notify({
          title: '提示',
          message: '请先选择班级和课程',
          duration: 2000
        })
        return false
      }
      this.common_dialog = true
      this.SportType = 0
      // this.StartMonitoring()
    },
    end_model() { // 点击结束检测
      this.open_flag = false
      this.CloseMonitoring()
      this.$refs.zhengti.flag = false
      this.$refs.richang.flag = false
      this.$refs.xiangxi.flag = false
    },

    hand_close_common(val) { // dialog遮罩取消
      this.common_dialog = val
    },
    common_dialog_false(val) { // dialog点击取消
      this.common_dialog = val
      // alert('你点击了取消')
    },
    async common_dialog_true(val) { // dialog点击确定
      await this.StartMonitoring()
      this.common_dialog = val
      this.open_flag = true
      this.$refs.zhengti.flag = true
      // alert('你点击了确定')
    },
    hand_close_common2(val) { // dialog遮罩取消
      this.common_dialog2 = val
    },
    common_dialog_false2(val) { // dialog点击取消
      this.common_dialog2 = val
      alert('你点击了取消')
    },
    common_dialog_true2(val) { // dialog点击确定
      this.common_dialog2 = val
      this.model_change_flag = !this.model_change_flag
      // this.open_flag = true
      // alert('你点击了确定')
    },
    async richang_open() {
      if (this.class_value === '' || this.culum_value === '') {
        this.$notify.error({
          title: '提示',
          message: '请先选择班级和课程',
          duration: 2000
        })
        return false
      }
      this.$refs.richang.flag = true
      this.open_flag = true
      this.SportType = 1
      await this.StartMonitoring()
      // this.$refs.flag = true
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .btn{
  width: 140px!important;
}
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    min-width: 200px;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #13ce66;
      font-size: 14px;
      position: relative;
      // right:42px;
      right:10px;
      top: 0;
    }
  }

}

.CustomerList{
  position: relative;
  padding: 25px;
  .cus-center{
    position: relative;
    padding-top: 25px;
    background-color: white;
    min-height: 600px;
    // padding: 25px;
    .all-big{
      position: absolute;
      right: 12px;
      top: 12px;
    }
    .bg{
      // padding-top: 25px;
      // background-color: white;
      ::v-deep .el-tabs__nav-scroll{
        padding-left: 25px;
      }
    }
    .mid{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 18px;
      overflow: hidden;
      display: flex;
      width: fit-content;
      .mid-item{
        margin-right: 30px;
        overflow: hidden;
        .left{
          float: left;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.85);
          line-height: 32px;
        }
        .right{
          margin-left: 10px;
          float: left;
          width: 100px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border: 1px solid rgba(24, 144, 255, 0.5);
        }
      }
    }
  }
  .richang{
    .mid{
      padding-left: 30px;
      width: 100%;
      border-bottom: 1px solid #E8E8E8;
      padding-bottom: 10px;
    }
  }
}

::v-deep .el-tabs__item.is-active{
  color: #42b983;
}
::v-deep .el-tabs__active-bar{
  background-color: #42b983;
}
// ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
//     background-color: #42b983;
//     border-color: #42b983;
// }
// ::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
//   border-color: #42b983;
//   outline-color:#42b983;
// }
// .name_word{
//   color: #46a6ff;
// }
// ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background-color: #41cb89;   // 进行修改背景和字体
//   color: #fff;
// }
// .pagin{
//   margin-top: 25px;
//   text-align: right;
// }
.item-body{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .item{
    width: 160px;
    height: 167px;
    background: linear-gradient(352deg, #3965FF 0%, #00B0FF 100%);
    border-radius: 6px;
    opacity: 0.9;
    margin: 16px;
    display: flex;
    align-items: center;
    position: relative;
    .right{
      position: absolute;
      right: 12px;
      top: 12px;
      width: 30px;
      height: 30px;
      // background-color: black;
    }
    .name{
      position: absolute;
      top: 24px;
      left: 12px;
      font-size: 18px;
      color: white;
    }
    .num{
      text-align: center;
      width: 100%;
      font-size: 42px;
      color: white;
      font-weight: bold;
    }
    .bot{
      position: absolute;
      bottom: 3px;
      right: 0;
      display: flex;
      .b-item{
        width: 22px;
        height: 22px;
        // background-color: black;
        margin-right: 5px;
        img{
          width: 100%;
        }
      }
    }
    &.grey{
      background: linear-gradient(353deg, #B4B4B4 0%, #D9D9D9 100%);
    }
    &.green{
      background: linear-gradient(340deg, #00D2A0 0%, #00E34B 100%);
    }
    &.origin{
      background: linear-gradient(353deg, #FF6022 0%, #FFB100 100%);
    }
    &.red{
      background: linear-gradient(353deg, #F04864 0%, #FFBEC8 100%);
    }
  }
  // .item:nth-of-type(6n+1){
  //   margin-left: 0;
  // }
}
</style>
